<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jq/jquery1.9/jquery-1.9.0.js"></script>
    <style>
        .mydiv {
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
    <script>

        // show([speed][,callback])：使元素集合的元素显示。
        // speed：效果的持续时间(可选)，毫秒或者预定义的字符串( slow、normal、fast)。如果省略则不产生动画，立即显示
        // 元素
        // callback：动画结束时，jQuery自动调用的方法(回调方法)
        $(function () {
            $("input:eq(0)").click(function () {
                $(".mydiv").hide(4000, function () {
                    alert("隐藏成功!!!")
                });

            });
            $("input:eq(1)").click(function () {
                $(".mydiv").show(4000);
            });
            $("input:eq(2)").click(function () {
                $(".mydiv").fadeOut(2000);
            });
            $("input:eq(3)").click(function () {
                $(".mydiv").fadeIn(2000);
            });
            $("input:eq(4)").click(function () {
                $(".mydiv").slideUp(2000);
            });
            $("input:eq(5)").click(function () {
                $(".mydiv").slideDown(2000);
            });
            $("input:eq(6)").click(function () {

                /*  
                 $(selector).animate({ params }, speed, [callback])
                     params参数为制作动画效果的CSS属性名与值，必选
                     speed参数为动画的效果的速度，单位为毫秒，可选
                     callback参数为动画完成时执行的回调函数名，可选 
                 */
                $(".mydiv").animate({
                    width:"300px",
                    height:"300px"
                },1000,function(){
                    $(".mydiv").animate({
                        width:"100px",
                        height:"100px"
                       
                    },1000,function(){
                        $(".mydiv").animate({
                            width:"0px",
                            height:"0px"
                        },1000);
                    });
                });

            });
        });


    </script>
</head>

<body>
    <input type="button" value="隐藏">
    <input type="button" value="显示">
    <input type="button" value="淡出">
    <input type="button" value="淡入">
    <input type="button" value="上滑">
    <input type="button" value="下滑">
    <input type="button" value="自定义动画">
    <div class="mydiv"></div>
</body>

</html>